<template>
	<div>
		<div class="order-select">
			<h2>{{saleOrderViewVo.dataBillstateStr}}</h2>
			<p><span class="select-span">订单号：{{saleOrderViewVo.orderCode}}<i v-if="saleOrderViewVo.orderApplySpecial == 1" class="tejia">特价</i></span><span style="margin-left: 20px;">客户名称 : {{saleOrderViewVo.memberBname}}【{{saleOrderViewVo.gradeName}}】</span></p>
		</div>
		<div class="order-tab">
			<table class="order-tab1" border="0" cellspacing="0" cellpadding="0" width="100%">
				<col width="4.5%" />
				<col width="4.5%" />
				<col width="8%" />
				<col width="15%" />
				<col width="18%" />
				<col width="10%" />
				<col width="5%" />
				<col width="12%" />
				<col width="12%" />
				<col width="8%" />
				<col width="8%" />
				<col width="8%" />
				<tr class="tab-th">
					<td>序号</td>
					<td>主图</td>
					<td>商品编码</td>
					<td>商品名称</td>
					<td>规格</td>
					<td>数量</td>
					<td>单位</td>
					<td>单价</td>
					<td>小计</td>
					<td>备注</td>
				</tr>
				<tr class="hoverTr" v-for="(item,index) in saleOrderGoodsViewVoList" v-on:click.stop="doThis" style="height: 55px;">
					<td>
						<span>
							{{index+1}}
						</span>
					</td>
					<td><img :src="item.goodsBigPic" v-if="item.goodsBigPic!=''"><em class="iconfont" style="color: #aaa;font-size: 30px;" v-else>&#xe714;</em></td>
					<td>{{item.goodsCode}}</td>
					<td>{{item.goodsName}}</td>
					<td>{{item.goodsSkuValue}}</td>
					<td>{{item.goodsBuyNum}}</td>
					<td>{{item.goodsNumUnit}}</td>
					<td>{{Number(item.goodsSalePrice).toFixed(2)}}</td>
					<td>{{(item.goodsSalePrice * item.goodsBuyNum).toFixed(2)}}</td>
					<td>
						<span class="goodsRemark"  :title="item.goodsRemark">{{item.goodsRemark}}</span>
						<!--<em class="iconfont" v-if="orderBuyRemark==''" @click="addbeizhu">&#xec52;</em>-->
					</td>
				</tr>

				<tr class="dorder-td hoverTr">
					<td>合计</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>{{invalue}}</td>
					<td></td>
					<td></td>
					<td>{{valuesum}}</td>
					<td></td>

				</tr>
				<tr class="dorder-tend">
					<td colspan="10">
						<!--<p><em class="iconfont" style="font-size: 12px;">&#xe617;</em>运费：<span>{{saleOrderViewVo.orderTotalFreight}}</span></p>-->
						<p>应付金额：<span>{{Number(saleOrderViewVo.orderTotalMoney).toFixed(2)}}</span></p>
					</td>
				</tr>
			</table>
		</div>
		<div class="order-xinxi">
			<div class="order-deta">
				<span class="huise" style="float: left;">收货信息</span>
				<!--<span style="margin-left: -10px;">
					{{saleOrderViewVo.deliverySummary}}
				</span>-->
				<p style="float:left;margin-left: 3px;">
					收货人：<span>{{saleOrderViewVo.deliveryContact}}</span> 联系电话：
					<span>{{saleOrderViewVo.deliveryPhone}}</span> 收货地址：
					<span>{{saleOrderViewVo.deliveryArea}}{{saleOrderViewVo.deliveryAddress}}</span>
				</p>
			</div>

			<div class="order-deta">
				<span class="huise" style="float: left;line-height: 34px;margin-right: 14px;">交货日期</span>
				<template>
					<div class="block">
						<el-date-picker v-model="saleOrderViewVo.deliveryDate" type="date" placeholder="选择日期" :disabled="true">
						</el-date-picker>
					</div>
				</template>
			</div>

			<div class="order-deta">
				<div style="float: left;">
					<span class="huise">备注说明</span>
					<!--<em class="iconfont" @click="addbeizhu"  style="cursor: pointer;color: #98a8b8;">&#xec52;</em>-->
				</div>
				<ul style="float: left;margin-left: 10px;">
					<li>{{saleOrderViewVo.orderBuyRemark}}</li>
				</ul>
			</div>
			<div class="order-deta clearfix iconCloseP" style="margin-top: 20px;">
				<span class="huise fl" style="height:36px;line-height:36px;">附件信息</span>
				<el-upload
                    class="upload-demo fl"
                    action="/v3/misc/common/uploadFile"
                    :file-list="vue_upload_fileList"
                    :data="vue_upload_uploadData"
                    :on-remove="vFun_upload_remove"
                    :on-success="vFun_upload_success"
                    :on-error="vFun_upload_error"
                    :before-upload="vFun_upload_before">
                    <label class="fl upload_list"><em class="iconfont" style="font-size: 14px;">&#xe6c4;</em>添加附件</label>
                    <p style="height:36px;line-height:36px;margin-top:0;margin-left:10px;" class="el-upload__tip fl" title="（附件最大20M，支持格式：Word、Excel、Txt、JPG、PNG、BMP、GIF）">（附件最大20M，支持格式：Word、Excel、Txt、JPG、PNG、BMP、GIF）</p>
                  </el-upload>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				saleOrderViewVo: {}, // 订单对象
				saleOrderGoodsViewVoList: [], // 订单商品集合
				orderApplySpecial: '1', // 是否特价
				invalue: 0, // 数量合计
				valuesum: 0, // 金额合计
				vue_upload_uploadData:{  //附件上传的data
					"fileName":'',  //附件文件名
					"moduleName":'Sale',  //模块
					"fromTable":'SaleOrder',  //来源表
					"fromCode":''  //订单code
				},
				vue_upload_fileList:[]  //上传附件的list
			}
		},
		created(){
			this.vue_upload_uploadData.fromCode = localStorage.getItem("orderCode");
		},
		mounted() {
			//查询订单详情
			this.queryOrderAndFud();
			this.queryByPage();
			this.query_checkout();
		},
		methods: {
			vFun_upload_remove(file,fileList){  //附件上传的移除事件
				this.axios({
					method: "DELETE",
					url: "/v3/basic/files/delete",
					data: {
						"fromTable": "SaleOrder",
						"fromCode": this.vue_upload_uploadData.fromCode,
						"fileUrl": file.response || file.fileUrl
					}
				}).then((res) => {
					this.Public.openSuccess(this, "操作成功！");
				}).catch((err) => {
					this.Public.openError(this, err.response.data);
				})

	    	},
	    	vFun_upload_success(res,file,fileList){  //附件上传的成功事件
	    		this.Public.openSuccess(this,'操作成功！')

	    	},
	    	vFun_upload_error(err,file,fileList){  //附件上传的失败事件
	    		this.Public.openError(this,'上传失败，请重新上传！')
	    	},
	    	vFun_upload_before(file){  //附件上传的before事件
	    		this.vue_upload_uploadData.fileName=file.name; //获取上传时的fileName
	    		const typeArr = ['xls','xlsx','doc','docx','png','jpg','jpeg','txt','gif','bmp'];  //定义上传的类型
		        const isLt20M = file.size / 1024 / 1024 <= 20;  //判断文件大小
		    	let FileName = file.name.substr(file.name.lastIndexOf('.')+1);  //得到上传的类型

		        if (typeArr.indexOf(FileName)===-1) {  //判断类型
		        	this.Public.openError(this,"上传附件类型有误!")
		        }

		        if (!isLt20M) {  //判断大小
		        	this.Public.openError(this,"上传附件大小不能超过20MB!")
		        }
		        return (typeArr.indexOf(FileName)!==-1) && isLt20M;
	    	},







			//----------------查询订单和当前资金账户详情----------------------
			queryOrderAndFud() {
				this.axios({
					method: 'POST',
					url: "/v3/sale/orders/" + localStorage.getItem("orderCode") + "/queryOrderAndFud",
					data: {},
				}).then((res) => {
					this.memberBname = res.data.memberBname; //客户名称
					this.orderCode = res.data.orderCode; //订单编号
					this.orderApplySpecial = res.data.orderApplySpecial; //是否 特价
					this.deliveryDate = res.data.deliveryDate; //交货日期
					this.orderTotalFreight = res.data.orderTotalFreight; //运费
					this.orderBuyRemark = res.data.orderBuyRemark; //备注
					this.orderTotalMoney = res.data.orderTotalMoney; //订单金额
					this.vue_upload_fileList = JSON.parse(JSON.stringify(res.data.basicFileVoList));
					this.vue_upload_fileList.forEach((item) => { //给商品的描述图片数组加上url属性，如果不加，页面上不会回显
						item.url = item.fileUrl;
						item.name=item.fileOriginName;
					});
				}).catch((err) => {
					this.Public.openError(this, err.response.data);
				});
			},
			//-----------------查询订单和当前资金账户详情---------------------
			queryByPage() {
				this.axios({
					method: 'GET',
					url: "/v3/sale/orders/" + localStorage.getItem("orderCode")
				}).then((res) => {
					var orderGoodsViewVoList = res.data.saleOrderGoodsDataList;
					this.saleOrderViewVo = res.data; // 订单详情
					this.saleOrderGoodsViewVoList = orderGoodsViewVoList; // 订单商品
					if(orderGoodsViewVoList != null && orderGoodsViewVoList != undefined) {
						var valuesum = 0;
						for(var i = 0; i < orderGoodsViewVoList.length; i++) {
							this.invalue += orderGoodsViewVoList[i].goodsBuyNum;
							valuesum += orderGoodsViewVoList[i].goodsBuyNum * orderGoodsViewVoList[i].goodsSalePrice;
						}
						this.valuesum = Number(valuesum).toFixed(2);
					}
					//判断订单状态
					if(res.data.dataBillstate == "3") {
						this.tabxiang = true;
					} else {
						this.tabxiang = false;
					}
					//显示原有物流信息
					if(res.data.dataBillstate == "5" || res.data.dataBillstate == "6") {
						this.saleOrderViewVo.deliveryDate = res.data.deliveryDate;
					}
				}).catch((err) => {
					this.Public.openError(this, err.response.data);
				});
			},
			query_checkout() {
				this.axios({
					method: 'GET',
					url: "/v3/sale/orders/" + localStorage.getItem("orderCode"),
					data: {}
				}).then((res) => {
					this.saleOrderGoodsViewVoList2 = res.data.saleOrderGoodsDataList;
				}).catch((err) => {
					this.Public.openError(this, err.response.data);
				});
			},
		}
	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	.location {
		padding: 3px 0 15px 0;
	}

	.order {
		background: #fff;
		padding: 5px 20px;
		overflow-y: auto;
		font-family: "微软雅黑";
		position: relative;
	}

	.order-input-em2 {
		position: relative;
		right: 5px;
		top: 0px;
		cursor: pointer;
	}

	.order-tab {
		margin-top: 15px;
		border-left: 1px solid #e7e9f1;
	}

	.order-tab1 td {
		text-align: center;
		padding: 0px 0;
		border: 1px solid #e7e9f1;
		border-top: 0;
		border-left: 0;
		position: relative;
	}

	.order-tab1 td img {
		width: 45px;
		margin: 0 auto;
	}

	.order-tab1 .tab-th td {
		background: #eff1f8;
		padding: 14px 0;
	}

	.order-tab1 .order-input1 {
		height: 34px;
		width: 100px;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		text-indent: 5px;
	}

	.dorder-td td {
		padding: 15px 0;
	}

	.dorder-tend td {
		padding: 12px 15px;
		text-align: right;
	}

	.activedis {
		background: #eff1f8;
		cursor: no-drop;
	}

	.dorder-tend p span {
		display: inline-block;
		width: 120px;
	}

	.dorder-tend p:last-child span {
		color: #f33333;
		font-size: 20px;
	}

	.dorder-tend p {
		margin-top: 0px;
	}

	.order-xinxi {
		margin: 20px;
		margin-bottom: 50px;
	}

	.order-deta {
		position: relative;
		margin-top: 15px;
		clear: both;
		overflow: hidden;
	}

	.order-deta span {
		margin-right: 10px;
	}

	.order-deta a {
		display: inline-block;
		width: 80px;
		height: 30px;
		text-align: center;
		line-height: 31px;
		border-radius: 20px;
		border: 1px solid #cdd9e6;
		margin-top: 30px;
	}

	.order-deta a:first-child {
		background: rgb(19, 193, 159);
		color: #fff;
		border: 0;
		height: 32px;
		line-height: 32px;
	}

	.putongfp {
		margin-left: 62px;
	}

	.order-caozuo {
		position: absolute;
		top: 10px;
		right: 20px;
		z-index: 100;
		color: #7d91a5;
		margin-right: 20px;
	}

	.order-caozuo span {
		margin-left: 15px;
		cursor: pointer!important;
		display: inline-block;
	}

	.order-caozuo span a {
		color: #7d91a5;
	}

	.order-caozuo span a:hover {
		color: #13C19F;
	}

	.order-caozuo span em {
		position: relative;
		top: 2px;
	}

	.order-caozuo span:hover {
		color: #13C19F;
	}

	.order-select {
		overflow: hidden;
		position: relative;
	}

	.order-select h2 {
		color: #f96b6b;
		font-weight: normal;
		margin-top: 15px;
		float: left;
	}

	.order-select p {
		margin-top: 20px;
		float: left;
	}

	.order-select .select-span {
		margin-left: 20px;
	}

	.order-redio {
		float: right;
		margin-top: 20px;
	}

	.huise {
		color: #98a8b8;
		display: inline-block;
		margin-right: 20px;
		text-align: right;
	}

	.order-czrz {
		width: 100%;
		margin-top: 20px;
	}

	.order-czrz th {
		font-weight: normal;
		text-align: left;
		background: #eff1f8;
		border: 1px solid #cdd9e6;
		border-top: 0;
		border-left: 0;
		height: 40px;
		text-indent: 15px;
		font-size: 13px;
	}

	.order-czrz td {
		text-indent: 15px;
		height: 40px;
	}

	.bzstyle {
		border: 1px solid #cdd9e6;
		width: 375px;
		height: 150px;
		margin: 0 auto;
		border-radius: 3px;
	}

	.ckfhjl-top {
		padding: 20px 25px;
		background: #fff9ef;
		margin: 15px 0;
		overflow: hidden;
	}

	.ckfhjl-top-span {
		font-size: 18px;
		color: #f96b6b;
		font-weight: normal;
	}

	.ckfhjl-top p {
		line-height: 30px;
	}

	.ckfhjl-top span {
		margin-right: 20px;
	}

	.chuku-top {
		height: 31px;
		width: 150px;
		text-align: center;
		cursor: pointer;
		line-height: 29px;
		margin: 10px 0;
	}

	.chukuactive {
		border-bottom-right-radius: 20px;
		border-top-right-radius: 20px;
		background: #93a6b7;
		color: #fff;
	}

	.chuku-top em {
		position: relative;
		top: 1px;
	}

	.chuku-table {
		border: 1px solid #cdd9e6;
		position: relative;
	}

	.chuku-two {
		border-top: 1px solid #cdd9e6;
		text-align: right;
		padding: 15px;
	}

	.chuku-two span {
		margin-left: 15px;
	}

	.chuku-two span:hover {
		color: #13C19F;
		cursor: pointer;
	}

	.table-bottom {
		padding: 15px;
	}

	.table-bottom p {
		line-height: 22px;
	}

	.table-bottom span {
		color: #98a8b8;
		display: inline-block;
		width: 70px;
	}

	.shoukuan-table {
		margin-top: 20px;
		border-left: 1px solid rgb(223, 234, 236);
	}

	.addSk {
		position: absolute;
		width: 100px;
		height: 32px;
		line-height: 32px;
		color: #fff;
		background: #13C19F;
		border-radius: 20px;
		text-align: center;
		right: 0;
		bottom: 0px;
		cursor: pointer;
	}

	.tejia {
		color: #fff;
		background: #FF0000;
		margin-left: 3px;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}

	.add {
		position: absolute;
		padding: 10px 20px 20px 20px;
		z-index: 100;
		background: #fff;
		width: 100%;
		box-shadow: 0px 0px 5px #666;
		top: 0;
		left: 0;
		box-sizing: border-box;
	}

	.Fblock {
		margin-top: 20px;
		margin-left: 20px;
		margin-bottom: 22px;
	}

	.Fblock .demonstration {
		margin-right: 8px;
	}

	.search-btn {
		margin-top: 20px;
		clear: both;
	}

	.el-date-editor.el-input {
		width: 320px;
	}

	.wuliB {
		float: left;
		width: 480px;
		margin-top: 18px;
	}

	.wuliB .el-textarea__inner {
		height: 100px;
	}

	.el-col-11 {
		width: 300px;
	}

	.el-select {
		width: 300px;
	}

	.daizhifu {
		box-sizing: border-box;
		margin-left: 25px;
		padding: 15px;
		background: #f8f9fd;
		margin-top: 20px;
	}

	.daizhifu p {
		border-bottom: 1px solid #cdd9e6;
		line-height: 35px;
		margin-bottom: 5px;
	}

	.daizhifu>span {
		font-size: 22px;
		color: #f96b6b;
	}

	.daizhifu>span span {
		position: relative;
		top: 3px;
		margin-left: 5px;
	}

	.daizhifu i span {
		margin: 0 10px;
	}

	.el-date-editor.el-input {
		width: 180px;
	}

	.upload-demo {
		line-height:36px;
	}
	.upload-demo:hover {
		color:#00c29f;
	}

	.caozuoqizhi {
		cursor: pointer;
	}

	.caozuoqizhi em {
		font-size: 12px;
		margin-left: 2px;
		display: inline-block;
	}

	.activEm {
		-webkit-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}

	.p:hover {
		background: #EEF1F9;
		color: #03b8cc;
	}

	.p {
		text-indent: 10px;
	}

	.benciCk input {
		height: 34px;
		width: 80px;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		text-indent: 5px;
		margin-right: 3px;
	}

	.order-select p {
		margin-right: 20px;
	}

	.chuku-em {
		top: -1px!important;
	}

	.chuku-two-a {
		display: inline-block;
		height: 32px;
		color: #FFF;
		background: #13C19F;
		width: 80px;
		text-align: center;
		line-height: 32px;
		border-radius: 20px;
	}

	.add h3 {
		font-size: 16px;
		font-weight: normal;
	}

	.name-wrapper img {
		width: 42px;
		margin: 0 auto;
	}

	.outpass {
		display: inline-block;
		width: 80px;
		box-sizing: border-box;
		height: 32px;
		line-height: 32px;
		text-align: center;
		background: #13C19F;
		color: #fff;
		border-radius: 20px;
	}

	.order-caozuo .outpass:hover {
		color: #fff;
	}

	.upload_list{
		cursor:pointer;
	}
	.upload_list:hover{
		color:#00c29f;
	}
	.goodsRemark{
		display:inline-block;width:90%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
	}
</style>
